<template>
  <div>
    <carousel-3d
      ref="carousel"
      :perspective="30"
      :inverseScaling="500"
      :space="400"
      :loop="false"
      @before-slide-change="onSlideChange"
    >
      <slide v-for="(item, index) in Lists" :key="index" :index="index">
        <div class="carouselTitle">{{ item.title }}</div>
        <div class="carouselContent">{{ item.text }}</div>
      </slide>
    </carousel-3d>
    <div class="enums">
      <div class="enums-list" @click="goSlideIndex(index)" height="20px" v-for="(item, index) in Lists" :key="index">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script>
//   import { Carousel3d, Slide } from "vue-carousel-3d";
// import Carousel3d from 'vue-carousel-3d';
export default {
  // components: {
  //   Carousel3d,
  //   Slide,
  // },
  data() {
    return {
      Lists: [
        {
          title: '1',
          text: 'xxxxxx ',
        },
        {
          title: '2',
          text: 'xxxxxx ',
        },
        {
          title: '3',
          text: 'xxxxxx ',
        },
        {
          title: '4',
          text: 'xxxxxx ',
        },
        {
          title: '5',
          text: 'xxxxxx ',
        },
        {
          title: '6',
          text: 'xxxxxx ',
        },
        {
          title: '7',
          text: 'xxxxxx ',
        },
        {
          title: '8',
          text: 'xxxxxx ',
        },
      ],
    }
  },
  methods: {
    onSlideChange(temp) {
      console.log(this.$refs.carousel, 'xxx')
      this.carouselIndex = temp
    },
    goSlideIndex(index) {
      // this.$refs.carousel.goNext(index)
      if (index > this.Lists.length - 1 || 0 > this.Lists.length - 1) {
        return
      }
      // this.$refs.carousel.goSlide(index);
      this.$refs.carousel.goFar(index)
    },
  },
}
</script>
<style lang="scss" scoped>
:deep.left-1 {
  color: red;
  transform: rotateY(-40deg) translateX(-400px) translateZ(100px) !important;
}
:deep.left-2 {
  color: red;
  transform: rotateY(-40deg) translateX(-800px) translateZ(100px) !important;
}
:deep.right-1 {
  color: red;
  transform: rotateY(40deg) translateX(400px) translateZ(100px) !important;
}
:deep.right-2 {
  color: red;
  transform: rotateY(40deg) translateX(800px) translateZ(100px) !important;
}
.enums {
  width: 300px;
  height: 30px;
  margin: 120px auto;
  display: flex;
  justify-content: center;
  // border: 1px solid black;
}
.enums-list {
  width: 30px;
  height: 100%;
  line-height: 30px;
  border: 1px solid gray;
  text-align: center;
}
</style>
